<template>
  <div class="container">
    <div class="row my-4">
      <div class="col-12">
        <div class="input-group mx-auto" style="max-width:30rem;">
          <input type="text" class="form-control" placeholder="请输入关键词/商品ID/商品链接" required v-model="searchKeyWord">
          <div class="input-group-prepend">
            <span class="input-group-text">搜索</span>
          </div>
        </div>
      </div>
    </div>
    <!-- 商品分类 -->
    <div class="row">
      <div class="col-12">
        <ul class="list-inline good-category justify-content-around" >
          <li class="list-inline-item" v-if="lookCategory" @click="lookCategory=!lookCategory;goodCategory=0" >默认</li>
          <li class="list-inline-item" :class="{'on':item.Cid==goodCategory}" v-for="(item,index) in goodsCategory" :key="index" @click="selectCat(item.Cid)">{{item.catName}}</li>
        </ul>
      </div>	
    </div>

    <div class="row" v-if="!lookCategory">
      <div class="col-sm-6 col-md-3 mb-3" v-for="(item,index) in filtersGoods" :key="item.ID">
        <div class="card">
          <img
            class="card-img-top"
            height="260"
            v-lazy="item.Pic"
          
            :alt="item.Title"
          >
          <div class="card-body">
            <h5 class="card-title">{{item.D_title}}</h5>
            <div class="row" style="white-space: nowrap;">
              <div class="col-6 prcieNum">{{item.Price | formatMoney}}</div>
              <div class="col-6">
                <a style="vertical-align: sub;" class="btn btn-sm addToCart text-white" @click="addShopCard(index)">
                      <i class="fa fa-shopping-cart pr-1"></i>加入购物车
                </a>
              </div>
            </div>
          </div>  
        </div>
      </div>
    </div>
    <div class="row" v-else>
      <div class="row" v-if="filtersCategoryGoods.length==0"><div class="col-12"><p class="alert alert-danger">当前分类下暂无商品</p></div></div>
      <div class="col-sm-6 col-md-3 mb-3" v-for="(item,index) in filtersCategoryGoods" :key="item.ID">
        
        <div class="card">
          <img
            class="card-img-top"
            height="260"
            :src="item.Pic"
            :alt="item.Title"
          >
          <div class="card-body">
            <h5 class="card-title">{{item.D_title}}</h5>
            <div class="row" style="white-space: nowrap;">
              <div class="col-6 prcieNum">{{item.Price | formatMoney}}</div>
              <div class="col-6">
                <a style="vertical-align: sub;" class="btn btn-sm addToCart text-white" @click="addShopCard(index)">
                      <i class="fa fa-shopping-cart pr-1"></i>加入购物车
                </a>
              </div>
            </div>
          </div>  
        </div>
      </div>
    </div>
    <nav v-if="!lookCategory">
      <ul class="pagination justify-content-center">
        <li :class="whichGoods==0 ? 'page-item disabled':'page-item'" @click="whichGoods==0?isHaveGoods():whichGoods-=1">
          <a class="page-link" href="###">上一页</a>
        </li>
        <li :class="whichGoods==n-1?'page-item active':'page-item'" v-for="n in totalPage" :key="n">
          <a class="page-link" href="###" @click="whichGoods=n-1">{{n}}</a>
        </li>
        <li :class="whichGoods+1==totalPage ? 'page-item disabled':'page-item'" @click="whichGoods+1==totalPage?isHaveGoods('end'):whichGoods+=1;">
          <a class="page-link" href="###">下一页</a>
        </li>
      </ul>
    </nav>
  </div>
</template>

<script>
export default {
  data(){
    return {
      goods:[],
      whichGoods:0,
      searchKeyWord:"",
      totalPage:0,
      goodsCategory:[{
          Cid:1,
          catName:'女装'
        },
        {
          Cid:2,
          catName:'母婴'
        },
        {
          Cid:3,
          catName:'美妆'
        },
        {
          Cid:4,
          catName:'居家日用'
        },
        {
          Cid:5,
          catName:'鞋品'
        },
        {
          Cid:6,
          catName:'美食'
        },
        {
          Cid:7,
          catName:'母婴'
        },
        {
          Cid:8,
          catName:'文娱车品'
        },
        {
          Cid:9,
          catName:'数码家电'
        },
        {
          Cid:10,
          catName:'男装'
        },
        {
          Cid:11,
          catName:'内衣'
        },
        {
          Cid:12,
          catName:'配饰'
        },
        {
          Cid:13,
          catName:'户外运动'
        },
        {
          Cid:14,
          catName:'家装家纺'
        }                                                                                                       
       ],
      lookCategory:false,
      goodCategory:0
    }
  },
  computed:{
    filtersGoods(){
      return this.goods[this.whichGoods] &&  this.goods[this.whichGoods].filter(item=>{
        if(item['Title'].includes(this.searchKeyWord) || item['D_title'].includes(this.searchKeyWord)){
            return true;
        }
      });
    },
    filtersCategoryGoods(){
      let newGoods=[];
      for(let item of this.goods){
        if(Array.isArray(item)){
          for(let item2 of item){
            if(item2.Cid==this.goodCategory) newGoods.push(item2);
          }
        }else{
          if(item.Cid==this.goodCategory) newGoods.push(item);
        }
      }
      return newGoods.filter(item3=>{
        if(item3['Title'].includes(this.searchKeyWord) || item3['D_title'].includes(this.searchKeyWord)){
            return true;
        }
      })
    }
  },  
  filters:{
    formatMoney(value){
      return "¥ "+value.toFixed(2);
    }
  },
  created(){
    this.getGoodInfo();
    
  },
  watch:{
    goods(){
      this.addLocalGoodsCat();
    }
  },
  methods:{
    getGoodInfo(){
      this.axios.get("goodInfo.json").then(result=>{
        this.goods=this.splitArray(result.data.result,20);
        this.totalPage=this.goods.length;
      })
    },
    splitArray(Array,splitNum="20"){
        let start=0;
        let end=Array.length;
        let newArray=[];
        while(start < end){
          newArray.push(Array.slice(start,start+=splitNum))
        }
        return newArray;
    },
    isHaveGoods(type=""){
      if(type=='end'){
        this.whichGoods=this.totalPage-1;
        alert("朋友，我也是有底线的！")
      }else{
        this.whichGoods=0;
        alert("我已经是第一页了！")
      }
    },
    addShopCard(index){
      if(!this.isUserLoginStatus()){
          alert("亲，这里建议你登陆后操作！");
          this.$router.push('/login');
          return;
      }
      let ShopCardGood=this.goods[this.whichGoods][index];
      let flag=false; 
      if(this.$store.getters.getShopCartGood.length){
        for(let item of this.$store.getters.getShopCartGood){
            if(item.ID==ShopCardGood.ID){
              ShopCardGood.addShopCardNum=item.addShopCardNum+1;
              flag=true;
              break;
            }
        }
        if(!flag){
          ShopCardGood.addShopCardNum=1;
        } 
      }else{
        ShopCardGood.addShopCardNum=1;
      } 
      this.$store.commit('addShopCard',ShopCardGood);

    },
    isUserLoginStatus(){
      for(let value of this.$store.getters.getUser) {
          if(value['isLogin']==true){
            return true;
          } 
      }      
      return false;
    },
    selectCat(cid){
      this.goodCategory=cid;
      this.lookCategory=true;
    },
    addLocalGoodsCat(){
      if(localStorage.getItem('newGoodsCat')!=null){
        let localGoodsCat=JSON.parse(localStorage.getItem('newGoodsCat'));
        for(let item of this.goods){
          if(Array.isArray(item)){
            for(let item2 of item){
             
              for(let item3 of localGoodsCat){
                if(item3.ID==item2.ID) this.$set(item2,'Cid',item3.Cid)
              }
            }
          }
        }
      }
    },    
  }
};
</script>

<style scoped>
	.card-body h5{
		height: 30px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.card-body>p i[class~=fa-star]{
		color:red;
	}
	.card-body .prcieNum{
		font-weight: 600;
		font-size:  22px;
		color: #f40;
	}
	.card-body a.addToCart{
		background:#f40;
		border:#f40;
	}
  .page-link:focus {
    z-index: 2;
    outline: 0;
    box-shadow: 0 4px 8px .1rem rgba(0,123,255,.25);
  }
  a:hover{
    cursor: pointer;
  }
  .good-category{
      height: 50px;
      overflow-x: auto;
      white-space: nowrap;	
  }
  .good-category li.on{
      background: #ff301a;
      border-color: #ff301a;
      color: #fff;
  }
  .good-category li {
      cursor: pointer;
      margin-right:.3rem;
      padding: 5px 10px;
      font-size: 16px;
      border: 1px solid #ddd;
      border-radius: 2px;
  }	    
</style>
